<template>
  <div class="page_main white_bg touguDetail">
    <div class="tougu_intro" @click="praclick">
      <div class="tougu_info" @mousedown="fang">
        <img class="tg_avatar fl" src="images/avatar.png" width="56" height="56" />
        <div class="tg_name">{{ touguInfo.name }}</div>
        <p class="tg_fans_box">
          <span class="tg_fans">{{ touguInfo.fans_num }}</span>
          人已关注
        </p>
        <p class="tg_ability">
          能力圈:
          <template v-for="(a, i) in touguInfo.ability">
            <span :key="i">{{ a.ability_name }}</span>
          </template>
        </p>
        <button
          class="atten_btn"
          :class="{ atten_btn_yes: touguInfo.status == '0' }"
          @click.stop="addFoucs(touguInfo.status, touguInfo.user_id)"
        >
          {{ touguInfo.status == '0' ? '已关注' : '关注' }}
        </button>
      </div>
      <ul class="tg_data" :tabindex="75">
        <li>
          {{ touguYield.total_plan_num }}
          <br />
          <span>已发计划数</span>
        </li>
        <li>
          {{ touguYield.success_rate }}%
          <br />
          <span>达成率</span>
        </li>
        <li>
          {{ touguYield.maxProfit }}%
          <br />
          <span>最佳收益率</span>
        </li>
        <li>
          {{ touguYield.point_pck_num }}
          <br />
          <span>观点包</span>
        </li>
      </ul>
      <dl class="tg_font" :tabindex="77">
        <dt>简介</dt>
        <dd>
          <input @click="fangclick" @focus="fangfocus" @touchend="fangtouchend" @mousedown="fangmousedown" />
          {{ touguInfo.introduction }}
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import { touguDetail, yieldDetail } from '@/service/touguServer'
import { addFoucsFun } from '@/service/yewuServer'
import { requestAll, requestSpread } from 'thinkive-hvue'
export default {
  name: 'touguDetail',
  data() {
    return {
      touguInfo: {},
      touguYield: [],
    }
  },
  computed: {
    curUserId() {
      return this.$route.params.userId
    },
    curTouguData() {
      return this.$store.state.curTougu
    },
  },
  created() {
    //执行多个并发请求
    requestAll([this.testParallel_1(), this.testParallel_2()]).then(
      requestSpread((tp1_res, tp2_res) => {
        console.log(tp1_res, tp2_res)
        if (tp1_res.error_no == '0') {
          this.touguInfo = tp1_res.results[0]
          this.touguInfo.ability = this.touguInfo.ability ? JSON.parse(this.touguInfo.ability) : []
        }
        if (tp2_res.error_no == '0') {
          this.touguYield = tp2_res.results[0]
        }
      }),
    )
  },
  methods: {
    pageBack() {
      this.$router.go(-1)
    },
    addFoucs(status, userId) {
      console.log('fouces ')
      addFoucsFun({
        user_id: userId,
        status: status == '0' ? '1' : '0',
      }).then(
        res => {
          if (res.error_no == '0') {
            this.touguInfo.status = res.results[0].status
          }
          //eslint-disable-next-line
    		}, err => {
          console.log(err)
        },
      )
    },
    funTouguDetail() {
      touguDetail({
        user_id: this.curUserId,
      }).then(
        res => {
          if (res.error_no == '0') {
            this.touguInfo = res.results[0]
            this.touguInfo.ability = this.touguInfo.ability ? JSON.parse(this.touguInfo.ability) : []
          }
          //eslint-disable-next-line
            }, err => {}
      )
    },
    funYieldDetail() {
      yieldDetail({
        user_id: this.curUserId,
      }).then(res => {
        if (res.error_no == '0') {
          this.touguYield = res.results[0]
        }
      })
    },
    fang() {
      console.log(document.activeElement)
      console.log()
    },
    fangfocus() {
      console.log('focus')
    },
    fangclick() {
      console.log('click')
    },
    fangtouchend() {
      console.log('touchend')
    },
    praclick() {
      console.log(document.activeElement)
    },
    fangmousedown() {
      console.log('mousedown')
    },
    testParallel_1() {
      return touguDetail({
        user_id: this.curUserId,
      })
    },
    testParallel_2() {
      return yieldDetail({
        user_id: this.curUserId,
      })
    },
  },
}
</script>

<style></style>
